<html>
<head>
<title>WebGLAPI sample</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> 

<script type="text/javascript" src="webglapi.js"></script>

</head>
		
	<body>
		<canvas id="webGLCanvas" width="500" height="500"></canvas>
		<br><br>
		<canvas id="webGLCanvas2" width="500" height="500"></canvas>

		<script id="shader-vs" type="x-shader/x-vertex">
  			attribute vec3 vertexPosition;
			attribute vec3 vertexNormal;
			
			uniform mat4 modelViewMatrix;
			uniform mat4 perspectiveMatrix;
			uniform vec3 lightDirection;
 
			varying float v_dot;

 			void main(void) {
				gl_Position = perspectiveMatrix * modelViewMatrix * vec4(vertexPosition, 1.0);
			    v_dot = max(dot(vertexNormal, lightDirection), 0.0);
  			}
		</script>
		<script id="shader-vs2" type="x-shader/x-vertex">
  			attribute vec3 vertexPosition;
			
			uniform mat4 modelViewMatrix;
			uniform mat4 perspectiveMatrix;

 			void main(void) {
				gl_Position = perspectiveMatrix * modelViewMatrix * vec4(vertexPosition, 1.0);
  			}
		</script>

		<script id="shader-fs" type="x-shader/x-fragment">
		  #ifdef GL_FRAGMENT_PRECISION_HIGH
		  // Default precision
		  precision highp float;
		  #else
		  precision mediump float;
		  #endif

		  varying float v_dot;

		  void main(void) {
			vec4 color = vec4(0.0, 1.0, 0.0, 1.0);
			gl_FragColor = vec4(color.xyz * v_dot, color.a);
		  }
		</script>
		<script id="shader-fs2" type="x-shader/x-fragment">
    		void main(void) {
        		gl_FragColor = vec4(1.0, 0.0, 0.6, 1.0);
    		}
		</script>
		<script type="text/javascript">
			var positions = new Float32Array([
				0.0,  0.0,  4.0,
				0.0,  1.0,  4.0,
			   -1.0,  0.0,  4.0,
				0.0, -1.0,  4.0,
				1.0,  0.0,  4.0,
    		]);
			var normals = new Float32Array([
				0.0,  0.0,  1.0,
				0.0,  1.0,  0.0,
				1.0,  0.0,  0.0,
				0.0,  1.0,  0.0,
				1.0,  0.0,  0.0
    		]);

			var indices = new Uint16Array([
				0, 1, 2, 0, 2, 3, 0, 3, 4, 0, 4, 1
			]);

			var light = [0.0, 0.0, 1.0];
			webglapi.render("webGLCanvas", "shader-vs", "shader-fs", indices, positions, normals, light);

			var positions2 = new Float32Array([
				0.0,  0.5,  4.0,
				-1.5, -1.0,  4.0,
				1.5, -1.0,  4.0
   			]);
			var normals2 = new Float32Array([
				0.0,  1.0,  0.0,
				0.0,  0.0,  1.0,
				0.0,  1.0,  0.0
    		]);
			var indices2 = new Uint16Array([
				0, 1, 2
			]);
			webglapi.render("webGLCanvas2", "shader-vs2", "shader-fs2", indices2, positions2, normals2);
		</script>
 </body></html>
